import Base from "../base.js";
import statusApi from "../../api/status.js";
import CinemasApi from "../../api/cinemas.js";
const cinemasProst = [
  {
    name: "影院名",
    key: "name",
  },
  {
    name: "影院电话",
    key: "phone",
  },
  {
    name: "影院地址",
    key: "address",
  },
  {
    name: "状态",
    key: "status",
  },
];
export default class extends Base {
  data = {
    cinemas: {
      _id: "",
      name: "",
      address: "",
      phone: "",
      status: "true",
    },
  };
  render() {
    this.$el.html(`
    <h1 style="text-align:center">新增影院</h1>
         <div class="layui" style="padding: 30px;width:400px;margin:auto;margin-left:460px">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <form class="layui-form" action="">
                        ${cinemasProst
                          .map((item) => {
                            if (item.key === "status") {
                              return `
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="true" title="营业">
                            <input type="radio" name="status" value="false" title="未营业">
                        </div>
                    </div>
                `;
                            }
                            return `
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px">${item.name}</label>
                    <div class="layui-input-block">
                        <input type="text" name="${item.key}" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:260px">
                    </div>
                </div>
            `;
                          })
                          .join("")}
            <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </div>
          </div>
                    </form> 
                </div>
            </div> 
        </div>
        `);
    const form = layui.form;
    form.render();
  }
  async add() {
    const { name, address, phone, status } = this.data.cinemas;
    this.data.cinemas = await CinemasApi.add({ name, address, phone, status });
  }
  async uploadimgs() {
    console.log(this.data.cinemas);
    location.hash = `#/info/uploadimgs/${this.data.cinemas._id}`;
  }

  handle() {
    const { cinemas } = this.data;
    _.map(cinemas, (v, k) => {
      if (k === "_id") {
        return;
      } else if (k === "statu") {
        $(`.statu`).on("click", (e) => {
          // console.log(e.target.value);
          cinemas.status = e.target.value;
        });
      } else {
        $(`input[name=${k}]`).on("input", (e) => {
          // console.log(e.target.value);
          cinemas[k] = e.target.value;
        });
      }
    });
    $(".add-btn").on("click", this.add.bind(this));
    $(".upload-btn-imgs").on("click", this.uploadimgs.bind(this));
  }
}
